<template>
  <div class="myhead"> 
    <span class="logo-wrapper">
        <img src="../assets/dreamtour的logo.png" style="height:100%;width: 100%;">  
    </span> 
    <span class="breadcrumb-wrapper"><Breadcrumb /></span>
    <span class="avatar-wrapper">
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                <span class="el-dropdown-link">
                    <span class="user-avatar" style="background-color: #409EFF; color: white; padding: 4px 10px; border-radius: 20px;">
                        管理员
                    </span>
                    <span style="color: aliceblue;">ID: {{ uName }}</span>
                    <el-icon class="dropdown-icon" style="color: aliceblue;">
                        <arrow-down />
                    </el-icon>
                </span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="userInfo">
                    <el-icon><user /></el-icon>
                    用户信息
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                    <el-icon><Failed /></el-icon>
                    退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
        </el-dropdown>            
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Breadcrumb from '../components/Breadcrumb.vue';
import { ElMessage } from 'element-plus'; // 引入提示组件

const uName = ref('管理员'); // 显示“管理员”

const router = useRouter(); // 路由实例

// 从 localStorage 加载用户信息
const loadStoredUser = () => {
  const storedInfo = JSON.parse(localStorage.getItem('adminId'));
  if (storedInfo) {
    uName.value = storedInfo || '管理员'; // 设置默认昵称为管理员
  }
};

// 退出登录并清除缓存
const handleLogout = () => {
  localStorage.removeItem('loggedIn');
  localStorage.removeItem('authorityLevel');
  localStorage.removeItem('user'); // 清除用户信息
  ElMessage.success('退出成功');
  router.push('/login');  // 跳转回登录页面
};

// 处理点击事件
const handleCommand = (command) => {
  if (command === 'logout') {
    handleLogout(); // 调用退出功能
  }
  else if(command=== 'userInfo'){
    router.push('user');
  }
};

onMounted(() => {
  loadStoredUser(); // 加载用户信息
});
</script>

<style scoped>
.myhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #6C8187;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
}

.logo-wrapper {
    height: 40px;
    width: 100px;
    display: flex;
    align-items: center;
}

.breadcrumb-wrapper {
    margin-left: 20px;
    display: flex;
    align-items: center;
    flex: 1;
}

.avatar-wrapper {
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    height: 60px;
}

.user-avatar {
    background-color: #409EFF;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
}
</style>
